<template>
	<view class="wpprs">
		<view class="boxs">
			<view class="logo"><image src="../../static/logo.png" mode=""></image></view>
			<view class="tabbox">
				<view class="tab" @click="acw = 1">
					<view>密码登录</view>
					<view class="xian" :class="acw == 1 ? 'acw' : ''"></view>
				</view>
				<view class="tab" @click="acw = 2">
					<view>验证码登录</view>
					<view class="xian" :class="acw == 2 ? 'acw' : ''"></view>
				</view>
			</view>
			<view class="iptbox" v-if="acw == 1">
				<image src="../../static/name.png" class="name" mode=""></image>
				<input type="number" v-model="phone" maxlength="11" placeholder="请输入登录帐号" />
				<view class="xian"></view>
				<image src="../../static/password.png" class="password" mode=""></image>
				<input type="password" v-model="password" placeholder="请输入密码" />
			</view>
			<view class="iptbox" v-if="acw == 2">
				<image src="../../static/pomes.png" class="name" mode=""></image>
				<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号" />
				<view class="xian"></view>
				<image src="../../static/password.png" class="password" mode=""></image>
				<input type="number" v-model="verificationCode" maxlength="6" placeholder="请输入验证码" />
				<text class="getcode" @click="getcode">{{ timer < 1 ? '获取验证码' : `${timer}重新获取` }}</text>
			</view>
			<image src="../../static/login.png" class="loginbtn" @click="login" mode=""></image>
			<view class="nopasswordbox" v-if="acw == 1">
				<!-- <text class="yk">没有帐号？游客登录</text> -->
				<text class="nopassword" @click="nopassword">忘记密码？</text>
			</view>
		</view>
	</view>
</template>

<script>
import { login, handleGetCode, userInfo } from '../../api/login.js';
export default {
	data() {
		return {
			acw: 1,
			phone: '',
			verificationCode: '',
			password: '',
			timer: 0,
			timerfunc: null
		};
	},
	watch: {
		acw() {
			this.verificationCode = null;
		}
	},
	methods: {
		getcode() {
			if (this.phone.length != 11) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none',
					duration: 2000
				});
			}
			if (this.timer > 0) {
				return;
			} else {
			}
			handleGetCode({
				phone: this.phone
			}).then((data) => {
				uni.showToast({
					title: '验证码已发送',
					icon: 'none',
					duration: 2000
				});
				this.timer = 60;
				this.timerfunc = setInterval((_) => {
					this.timer = this.timer - 1;
					console.log('this.timer', this.timer);
					if (this.timer < 1) {
						clearInterval(this.timerfunc);
					}
				}, 1000);
			});
		},
		userInfoHandler(val) {
			console.log('userInfoHandler', val);
		},
		login() {
			if (this.acw == 1) {
				if (this.phone == '' || this.password == '') {
					uni.showToast({
						title: '请输入手机号/密码',
						icon: 'none',
						duration: 2000
					});
					return;
				}
			} else {
				if (this.phone == '' || this.verificationCode == '') {
					uni.showToast({
						title: '请输入手机号/验证码',
						icon: 'none',
						duration: 2000
					});
					return;
				}
			}
			uni.login({
				//获取微信信息
				// desc: '用于给您发动订单信息', // 声明获取用户个人信息后的用途，不超过30个字符
				success: (res1) => {
					//接口调用成功的回调
					console.log('res1', res1);
					uni.showLoading({
						title: '正在登陆'
					});
					// wx.getUserInfo({
					// 	success:info=>{
					// 		console.log('info',info)
					// 	}
					// })
					login({
						unionid: res1.unionid || null,
						phone: this.phone,
						code: res1.code,
						imei: res1.code,
						verificationCode: this.verificationCode,
						password: this.password
					}).then((data) => {
						uni.hideLoading();
						uni.showToast({
							title: '登录成功！',
							duration: 2000
						});
						uni.setStorage({
							key: 'accessToken',
							data: data.content.accessToken,
							success: function () {
								userInfo().then((data) => {
									// console.log('userInfo', data.content);
									uni.setStorage({
										key: 'userinfo',
										data: data.content,
										success() {
											uni.switchTab({
												url: '/pages/my/my'
											});
										}
									});
								});
							}
						});
					});
				}
			});
		},
		nopassword() {
			uni.navigateTo({
				url: '/pages/nopassword/nopassword'
			});
		}
	}
};
</script>

<style lang="less" scoped>
.wpprs {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url('http://junminyiqi.oss-cn-shanghai.aliyuncs.com/images/iconLoginBg-MZ0omDtB4LHR.png');
	background-size: 100%;
	box-sizing: border-box;
	padding-top: 150upx;

	.boxs {
		position: fixed;
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		.logo {
			width: 200upx;
			height: 242upx;
			margin-left: 50%;
			transform: translateX(-50%);

			image {
				width: 200upx;
				height: 242upx;
			}
		}

		.tabbox {
			.tab {
				display: inline-block;
				width: 50%;
				text-align: center;
				color: #ffffff;
				font-size: 32upx;
				padding-bottom: 20upx;

				.xian {
					width: 22upx;
					height: 6upx;
					border-radius: 6upx;
					background-color: #fff;
					display: inline-block;
					opacity: 0;
				}

				.xian.acw {
					opacity: 1;
				}
			}
		}

		.iptbox {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 10upx;
			border: 1px solid rgba(255, 255, 255, 0.2);
			position: relative;
			margin-top: 60upx;

			.xian {
				height: 1px;
				background-color: #fff;
				opacity: 0.2;
			}

			input {
				color: #fff;
				padding: 40upx 40upx 40upx 100upx;
				font-size: 28upx;
			}

			.name,
			.password {
				width: 40upx;
				height: 40upx;
				position: absolute;
			}

			.name {
				left: 30upx;
				top: 48upx;
			}

			.password {
				left: 30upx;
				top: 182upx;
			}

			.getcode {
				position: absolute;
				font-size: 24upx;
				right: 40upx;
				color: #fff;
				bottom: 40upx;
				z-index: 99;
			}
		}
		.loginbtn {
			width: 100%;
			height: 96upx;
			margin-top: 60upx;
		}

		.nopasswordbox {
			padding-top: 60upx;
			color: #fff;
			font-size: 26upx;

			.yk {
				float: left;
			}

			.nopassword {
				float: right;
			}
		}
	}
}
</style>
